<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red-bg{background:red}
        .green-bg{background:green}
    </style>
</head>
<body>
<!--Vue的数据会展示到该div内-->
<div id="app">
    <p>{{message}}</p>
    <p>姓名:{{person.name}}，年龄:{{person.age}}，性别:{{person.gender}}</p>
    <p v-if="person.age >= 18">{{person.name}}是成年人</p>
    <p v-else>{{person.name}}是未成年人</p>
    <p v-show="person.gender=='男'">{{person.name}}是男的</p>
    <p v-show="person.gender=='女'">{{person.name}}是女的</p>
    <p>姓名:<input type="text" v-model="person.name"></p>
    <p>年龄:<input type="text" v-model="person.age"></p>
    <p>性别:<input type="text" v-model="person.gender"></p>
<!--v-bing可省略-->
    <table border="1px" v-bind:width="width">
        <tr>
            <th>姓名</th><th>年龄</th><th>性别</th>
        </tr>
        <tr v-for="per in persons" v-bind:class="per.gender == '男' ? 'red-bg' : 'green-bg' " @click="showPerson(per)">
            <td>{{per.name}}</td>
            <td>{{per.age}}</td>
            <td>{{per.gender}}</td>
        </tr>
    </table>

</div>
<!--导入Vue的文件-->
<script src="js/vue.min.js"></script>
<script>
    // 创建Vue对象   ViewModel
    //el是表达式，定位数据展示的位置
    //data是model，需要绑定的数据都定义在data里面
    //methods是方法，定义事件处理的方法
    new Vue({
        el:"#app",
        data:{
            message:"Hello Vue!！！",
            person:{name:"张三",age:"20",gender:"男"},
            width:"500px",
            persons:[
                {name:"张三",age:"20",gender:"男"},
                {name:"李四",age:"22",gender:"女"},
                {name:"王五",age:"23",gender:"男"},
                {name:"赵六",age:"18",gender:"女"},
                {name:"孙七",age:"19",gender:"男"}
            ]
        },methods:{
            //显示人的信息
            showPerson(per){
                alert("姓名："+per.name+",年龄："+per.age+",性别："+per.gender)
            }
        },created(){
            console.log("created")
        }, mounted(){
            console.log("mounted")
        },updated(){
            console.log("updated")
        },unmounted(){
            console.log("unmounted")
        }
    })
</script>
</body>
</html>